import React, {useState} from 'react';
import './App.css';
import Context from './context';
import {HashRouter as Router, Route, Switch} from 'react-router-dom';
import {Layout} from 'antd';

import {LeftOutlined, RightOutlined} from '@ant-design/icons';

import MenuX from './component/menu/MenuX';
import Login from './component/login/Login';
import School from './view/school/School';
import Member from './view/member/Member';
import CheckIn from './view/checkin/checkIn';
import Course from './view/course/Course';
import Reporter from './view/reporter/reporter'
import {useImmerState} from './hooks/useImmerState';
import useGlobal from './hooks/useGlobal';
import Subject from './view/subject/Subject';

const {Header, Sider, Content} = Layout;

function Routers() {
  const Global = useGlobal();
  const [collapsed, setCollapsed] = useState(false);
  const toggle = () => {
    setCollapsed(!collapsed);
  };

  return (
    <Router>
      <Layout style={{minHeight: '100vh'}}>
        {/* 侧边栏、菜单 */}
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <MenuX/>
          {!collapsed && <LeftOutlined
            style={{position: 'absolute', right: '20%', bottom: '50px', transform: 'scale(1.2)', color: 'white'}}
            onClick={toggle}/>}
          {collapsed && <RightOutlined
            style={{position: 'absolute', right: '20%', bottom: '50px', transform: 'scale(1.2)', color: 'white'}}
            onClick={toggle}/>}
        </Sider>
        <Layout>
          {/* 顶部栏 */}
          <Header className={'header'}>
            <Login/>
          </Header>
          {/* 内容 */}
          <Content className={'content-page'}>
            <Switch>
              {Global.state.login?.token &&
              <>
                <Route path="/school" exact component={School}/>
                <Route path="/member" exact component={Member}/>
                <Route path="/checkin" exact component={CheckIn}/>
                <Route path="/course" exact component={Course}/>
                <Route path="/reporter" exact component={Reporter}/>
                <Route path="/subject" exact component={Subject}/>
              </>
              }
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
}

function App() {
  const [global, setGlobal] = useImmerState({
    login: localStorage.getItem('msd_token') ?
      {
        token: localStorage.getItem('msd_token'),
        avatar: localStorage.getItem('msd_avatar'),
        name: localStorage.getItem('msd_name'),
        auth: localStorage.getItem('msd_auth')
      } :
      null,
    schoolList: [],
    memberList: [],
    checkInTypeList: [],
    courseTypeList: [],
  });

  return (
    <div className="App">
      <Context.Provider value={{global, setGlobal}}>
        <Routers/>
      </Context.Provider>
    </div>
  );
}

export default App;


// xyzp@JOBS